<template>
  <div>

      <font size='50px'>课程详情</font>
      
      <br/>

      标题:{{data.title}}
      <br>
      价格:{{data.price}}
      <br>
      课程类:<br>
      <span v-for="(i,p) in cate_fu" :key=p>{{i}}-></span><span>{{cate}}</span>
      <br>
      <video id='video' width='300' height='230' :src="src" controls='controls' autoplay='autoplay' muted></video>
      <br><br><br>
      
      <van-button @click="into">{{msg}}画中画</van-button>
      
      <br><br>
      关注课程:<van-switch v-model="checked" @click="flow" size='24px'/>
  </div>
</template>

<script>
import mycate from './mycate'
export default {
    data(){
        return{
            data:{},
            id:'',
            src:'',
            msg:'进入',
            cate:'',
            cate_fu:[],
            checked:true,
        }
    },
    mounted(){
        // 获取参数
        this.id=this.$route.query.id
        console.log('课程id是'+this.id)
        // 获取数据
        this.get_data()
        this.get_flow()
    },
    methods:{
        // 画中画
        into(){
            
            if(video !== document.pictureInPictureElement){
                video.requestPictureInPicture()
                this.msg='退出'
            }else{
                document.exitPictureInPicture()
                this.msg='进入'
            }
            
        },
        get_data(){
            this.axios.get('http://localhost:8000/coursedetail/',{params:{id:this.id}}).then((res)=>{
                console.log(res)
                this.data=res.data.data
                this.src='http://localhost:8000/static/upload/'+this.data.video
                this.cate_fu=res.data.cate_fu
                this.cate=res.data.cate
            })
        },
        // 获取关注状态
        get_flow(){
            let uid=localStorage.getItem('uid')
            this.axios.get("http://localhost:8000/getflow/",{params:{id:this.id,uid:uid}}).then((res)=>{
                console.log(res)
                let bool={'true':true,'false':false}
                this.checked=bool[res.data.state]
            })
        },
        flow(){
            if(this.checked){
                let uid=localStorage.getItem('uid')
                let parm={}
                parm['id']=this.id
                parm['uid']=uid
                this.axios.get("http://localhost:8000/addflow/",{params:parm}).then((res)=>{
                    console.log(res)
                    let bool={'true':true,'false':false}
                    this.checked=bool[res.data.state]
                })
            }else{
                let uid=localStorage.getItem('uid')
                let parm=new FormData()
                parm.append('id',this.id)
                parm.append('uid',uid)
                this.axios.post("http://localhost:8000/addflow/",parm).then((res)=>{
                    console.log(res)
                    let bool={'true':true,'false':false}
                    this.checked=bool[res.data.state]
                })
            }
        }
    }
}
</script>

<style>

</style>